{% extends '__base__.html' %}

{% block title %}注册{% endblock %}

{% block beforehead %}
<script xmlns:v-on="http://www.w3.org/1999/xhtml">

function validateEmail(email) {
    var re = /^[a-z0-9\.\-\_]+\@[a-z0-9\-\_]+(\.[a-z0-9\-\_]+){1,4}$/;
    return re.test(email.toLowerCase());
}

$(function () {
    var vm = new Vue({
        el: '#vm',
        data:{
            name: '',
            email: '',
            password1: '',
            password2: ''
        },
        // computed property for form validation state
        computed: {
            validation: function () {
                return {
                    name: this.name.trim(),
                    email: validateEmail(this.email.trim().toLowerCase()),
                    password1: !(this.password1 && this.password1.length < 6),
                    password2: this.password1 == this.password2
                }
            },
            isValid: function () {
                var validation = this.validation
                return Object.keys(validation).every(function (key) {
                    return validation[key]
                })
            }
        },
        methods:{
            submit: function(e){
                e.preventDefault();
                var $form = $('#vm');
                var email = this.email.trim().toLowerCase();
                var user = {
                    name: this.name.trim(),
                    email: email,
                    passwd: CryptoJS.SHA1(email + ':' + this.password1).toString()
                };
                console.log(user);
                if(this.isValid){
                    $.post('/api/users',user,function(data){
                        console.log(data);
                        alert('恭喜您，注册成功！');
                        return location.assign('/');
                    },'json');

                }
            }
        }
    });
    $('#vm').show();
});

</script>

{% endblock %}

{% block content %}

    <div class="uk-width-2-3">
        <h1>欢迎注册！</h1>
        <form id="vm" v-on:submit="submit" class="uk-form uk-form-stacked">
            <ul class="uk-form-danger">
                <li v-show="!validation.name">Name cannot be empty.</li>
                <li v-show="!validation.email">Please provide a valid email address.</li>
                <li v-show="!validation.password1">password len < 6.</li>
                <li v-show="!validation.password2">Passwords not equal.</li>
            </ul>
            <div class="uk-alert uk-alert-danger uk-hidden"></div>
            <div class="uk-form-row">
                <label class="uk-form-label">名字:</label>
                <div class="uk-form-controls">
                    <input v-model="name" initial="off"  detect-change="off" type="text" maxlength="50" placeholder="名字" class="uk-width-1-1">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label">电子邮件:</label>
                <div class="uk-form-controls">
                    <input v-model="email" initial="off"  detect-change="off" type="text" maxlength="50" placeholder="your-name@example.com" class="uk-width-1-1">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label">输入口令:</label>
                <div class="uk-form-controls">
                    <input v-model="password1" initial="off"  detect-change="off" type="password" maxlength="50" placeholder="输入口令" class="uk-width-1-1">
                </div>
            </div>
            <div class="uk-form-row">
                <label class="uk-form-label">重复口令:</label>
                <div class="uk-form-controls">
                    <input v-model="password2" initial="off"  detect-change="off" type="password" maxlength="50" placeholder="重复口令" class="uk-width-1-1">
                </div>
            </div>
            <div class="uk-form-row">
                <button type="submit" class="uk-button uk-button-primary"><i class="uk-icon-user"></i> 注册</button>
            </div>
        </form>
    </div>

{% endblock %}